package pages

import (
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ SelectBox() {
	@layouts.DocsLayout(
		"Select Box",
		"Dropdown control for choosing from predefined options.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				Text: "Examples",
				ID:   "examples",
				Children: []modules.TableOfContentsItem{
					{
						Text: "With Label",
						ID:   "with-label",
					},
					{
						Text: "Multiple",
						ID:   "multiple-select",
					},
					{
						Text: "Multiple Pills",
						ID:   "pills-select",
					},
					{
						Text: "No Search",
						ID:   "no-search",
					},
					{
						Text: "Disabled",
						ID:   "disabled",
					},
					{
						Text: "Form",
						ID:   "form",
					},
				},
			},
			{
				ID:   "api",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "selectbox",
						Text: "SelectBox",
					},
					{
						ID:   "trigger",
						Text: "Trigger",
					},
					{
						ID:   "value",
						Text: "Value",
					},
					{
						ID:   "content",
						Text: "Content",
					},
					{
						ID:   "group",
						Text: "Group",
					},
					{
						ID:   "label",
						Text: "Label",
					},
					{
						ID:   "item",
						Text: "Item",
					},
				},
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Select Box",
			Description: templ.Raw("Dropdown control for choosing from predefined options."),
			Tailwind:    true,
			VanillaJS:   true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Select Box",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.SelectBoxDefault(),
				PreviewCodeFile: "select_box_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "selectbox",
					JSFiles:       []string{"selectbox", "popover"},
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Examples",
				ID:    "examples",
			}) {
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "With Label",
					ShowcaseFile:    showcase.SelectBoxWithLabel(),
					PreviewCodeFile: "select_box_with_label.templ",
					ID:              "with-label",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Multiple",
					ShowcaseFile:    showcase.SelectBoxMultipleSelect(),
					PreviewCodeFile: "select_box_multiple.templ",
					ID:              "multiple-select",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Multiple Pills",
					ShowcaseFile:    showcase.SelectBoxMultipleSelectPills(),
					PreviewCodeFile: "select_box_pills.templ",
					ID:              "pills-select",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "No Search",
					ShowcaseFile:    showcase.SelectBoxNoSearch(),
					PreviewCodeFile: "select_box_no_search.templ",
					ID:              "no-search",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Disabled",
					ShowcaseFile:    showcase.SelectBoxDisabled(),
					PreviewCodeFile: "select_box_disabled.templ",
					ID:              "disabled",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Form",
					ShowcaseFile:    showcase.SelectBoxForm(),
					PreviewCodeFile: "select_box_form.templ",
					ID:              "form",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api",
			}) {
				@modules.APILegend()
				<div id="selectbox" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "SelectBox",
						Description: "Root container for the select box component.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the select container. Auto-generated if not provided.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the select container.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the select container.",
								Required:    false,
							},
							{
								Name:        "Multiple",
								Type:        "bool",
								Default:     "false",
								Description: "Whether multiple options can be selected.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="trigger" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Trigger",
						Description: "Button that opens the select dropdown when clicked.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the trigger element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the trigger.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the trigger element.",
								Required:    false,
							},
							{
								Name:        "Name",
								Type:        "string",
								Default:     "",
								Description: "Name attribute for the hidden input field used in forms.",
								Required:    false,
							},
							{
								Name:        "Disabled",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the select is disabled and non-interactive.",
								Required:    false,
							},
							{
								Name:        "HasError",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to display error styling on the select trigger.",
								Required:    false,
							},
							{
								Name:        "Multiple",
								Type:        "bool",
								Default:     "false",
								Description: "Whether multiple selections are allowed.",
								Required:    false,
							},
							{
								Name:        "ShowPills",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to show selected items as pills (automatically enables Multiple).",
								Required:    false,
							},
							{
								Name:        "SelectedCountText",
								Type:        "string",
								Default:     "",
								Description: "Text template for showing selected count in multiple mode.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="value" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Value",
						Description: "Display area for the selected value(s) or placeholder text.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the value element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the value display.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the value element.",
								Required:    false,
							},
							{
								Name:        "Placeholder",
								Type:        "string",
								Default:     "",
								Description: "Placeholder text shown when no option is selected.",
								Required:    false,
							},
							{
								Name:        "Multiple",
								Type:        "bool",
								Default:     "false",
								Description: "Whether this value display supports multiple selections.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="content" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Content",
						Description: "Dropdown container that holds the selectable options.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the content element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the dropdown content.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the content element.",
								Required:    false,
							},
							{
								Name:        "NoSearch",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to hide the search input in the dropdown.",
								Required:    false,
							},
							{
								Name:        "SearchPlaceholder",
								Type:        "string",
								Default:     "",
								Description: "Placeholder text for the search input field.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="group" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Group",
						Description: "Container for grouping related select options together.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the group element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the group.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the group element.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="label" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Label",
						Description: "Label text for a group of select options.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the label element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the label.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the label element.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="item" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Item",
						Description: "Individual selectable option within the dropdown.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the item element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the item.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the item element.",
								Required:    false,
							},
							{
								Name:        "Value",
								Type:        "string",
								Default:     "",
								Description: "The value of this option that will be submitted with forms.",
								Required:    false,
							},
							{
								Name:        "Selected",
								Type:        "bool",
								Default:     "false",
								Description: "Whether this option is currently selected.",
								Required:    false,
							},
							{
								Name:        "Disabled",
								Type:        "bool",
								Default:     "false",
								Description: "Whether this option is disabled and cannot be selected.",
								Required:    false,
							},
						},
					})
				</div>
			}
		}
	}
}
